<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 俱乐部信息管理</el-breadcrumb-item>
                <el-breadcrumb-item>俱乐部用户列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <template v-if="select_state === '0'">
                    <el-button type="primary" icon="el-icon-delete" class="handle-del mr10" 
                    :disabled = "flag"
                    @click="allbanVisible = true">批量禁用</el-button>
                </template>
                <template v-if="select_state === '1'">
                    <el-button type="primary" icon="el-icon-delete" class="handle-del mr10" 
                    :disabled = "flag"
                    @click="allonVisible = true">批量启用</el-button>
                </template>
                <el-select v-model="select_state" placeholder="筛选状态" class="handle-select mr10" @change="getData">
                    <el-option key="1" label="启用" value="0"></el-option>
                    <el-option key="2" label="禁用" value="1"></el-option>
                    <el-option key="3" label="全部" value="-1"></el-option>
                </el-select>
                <el-input v-model="select_word" placeholder="筛选用户名" class="handle-input mr10" @change="selectUserState"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            </div>
            <el-table :data="data" border class="table" ref="multipleTable" @selection-change="handleSelectionChange">
                <template v-if="select_state === '0' ||select_state === '2'">
                    <el-table-column type="selection" width="55" align="center"></el-table-column>
                </template>
                <el-table-column type="index" width="55" align="center" label="序列"></el-table-column>
                <el-table-column label="头像" width="100">
                    <template slot-scope="scope">
                        <el-image style="width: 80px; height: 80px" fit="cover"
                        :src="`http://localhost/fitness/public/static/img/`+scope.row.useravatar"
                        @click="handlePictureCardPreview(scope.row.useravatar)">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="realname" label="姓名" width="180">
                </el-table-column>
                <el-table-column prop="username" label="用户名" width="200">
                </el-table-column>
                <el-table-column prop="userphone" label="电话" width="200">
                </el-table-column>
                <el-table-column prop="useremail" label="邮箱地址" width="auto">
                </el-table-column>
                <el-table-column prop="userapplyt" label="入部日期" sortable width="200">
                </el-table-column>
                <el-table-column label="状态" align="center" width="100">
                    <!-- <i class="el-icon-circle-check" style="color:#1e90ff"> 已启用</i> -->
                    <template slot-scope="scope">
                        <template v-if="scope.row.userstate===0">
                            <i class="el-icon-circle-check" style="color:#1e90ff"> 已启用</i>
                        </template>
                        <template v-else>
                            <i class="el-icon-circle-close" style="color:red"> 已禁用</i>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100" align="center">
                    <template slot-scope="scope">
                        <template v-if="scope.row.userstate===0">
                            <el-button type="text" icon="el-icon-delete" class="red" @click="handleBan(scope.row)">禁用</el-button>
                        </template>
                        <template v-else>
                            <el-button type="text" icon="el-icon-circle-check" @click="handleOn(scope.row)">启用</el-button>
                        </template>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- mBan提示框 -->
        <el-dialog title="提示" :visible.sync="banVisible" width="300px" center>
            <div class="del-dialog-cnt">确认禁用？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="banVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmBan">确 定</el-button>
            </span>
        </el-dialog>
        <!-- mOn提示框 -->
        <el-dialog title="提示" :visible.sync="onVisible" width="300px" center>
            <div class="del-dialog-cnt">确认启用？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="onVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmOn">确 定</el-button>
            </span>
        </el-dialog>

        <!-- mAllon提示框 -->
        <el-dialog title="提示" :visible.sync="allonVisible" width="300px" center>
            <div class="del-dialog-cnt">确认全部启用？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="allonVisible = false">取 消</el-button>
                <el-button type="primary" @click="onAll">确 定</el-button>
            </span>
        </el-dialog>

        <!-- mAlloff提示框 -->
        <el-dialog title="提示" :visible.sync="allbanVisible" width="300px" center>
            <div class="del-dialog-cnt">确认全部禁用？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="allbanVisible = false">取 消</el-button>
                <el-button type="primary" @click="delAll">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 预览图片弹出框 -->
        <el-dialog :visible.sync="dialogImgVisible" width="25%">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: 'basetable',
        data() {
            return {
                clubUserData: [],
                multipleSelection: [],
                select_state: '0',
                select_word: '',
                dialogImageUrl: '',
                is_search: false,
                banVisible: false,
                onVisible: false,
                dialogImgVisible: false,
                allonVisible: false,
                allbanVisible: false,
                flag: true,
                onid: 0,
                banid: 0
            }
        },
        created() {
            this.getData();
        },
        computed: {
            data(){
                return this.clubUserData.filter((d) => {
                    if(d.realname){
                        if(d.username.indexOf(this.select_word) > -1
                        || d.realname.indexOf(this.select_word) > -1){
                            return d;
                        }
                    }else{
                        if(d.username.indexOf(this.select_word) > -1){
                            return d;
                        }
                    }
                })
            }
        },
        methods: {
            // TODO: clubid 应该从session中取得
            getData() {
                console.log('this.select_state :', this.select_state);
                this.$axios.get('/api/Club/clubUserList',{
                    params: {   
                        clubid: localStorage.clubid,
                        mod: this.select_state
                    }
                }).then(res => {
                    console.log('res.data :', res.data);
                    this.clubUserData = res.data
                })
            },
            search() {
                this.is_search = true;
            },
            handleBan(row) {
                this.banVisible = true;
                this.banid = row.userid;
            },
            handleOn(row) {
                this.onVisible = true;
                this.onid = row.userid;
            },
            delAll() {
                const length = this.multipleSelection.length;
                if(length === 0) {
                    this.$message.error('请至少勾选 一个用户');
                }else{
                    // TODO: 应该用Promise或者其他异步处理手段进行同步操作,在本处我就用settime来代替吧
                    for (let i = 0; i < length; i++) {
                        this.$axios.get('/api/Club/clubBanUser',{
                            params: {
                                userid: this.multipleSelection[i].userid
                            }
                        })
                    }
                    setTimeout(() => {
                        this.selectUserState();
                        this.allbanVisible = false;
                    }, 500);
                    this.$message.success('禁用了 ' + length + ' 个用户');
                    this.multipleSelection = [];                    
                }
            },
            onAll(){
                const length = this.multipleSelection.length;
                if(length === 0) {
                    this.$message.error('请至少勾选 一个用户');
                }else{
                    // TODO: 应该用Promise或者其他异步处理手段进行同步操作,在本处我就用settime来代替吧
                    for (let i = 0; i < length; i++) {
                        this.$axios.get('/api/Club/clubOnUser',{
                            params: {
                                userid: this.multipleSelection[i].userid
                            }
                        })
                    }
                    setTimeout(() => {
                        this.getData();
                        this.allonVisible = false;
                    }, 500);
                    this.$message.success('启用了 ' + length + ' 个用户');
                    this.multipleSelection = [];                    
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                if(this.multipleSelection.length === 0){
                    this.flag = true;
                }else{
                    this.flag = false;
                }
            },
            handlePictureCardPreview(url) {
                this.dialogImageUrl =`http://localhost/fitness/public/static/img/`+url;
                console.log('object :', this.dialogImageUrl);
                this.dialogImgVisible = true;
            },
            confirmBan(){
                this.$axios('/api/Club/clubBanUser',{
                    params: {
                        userid: this.banid
                    }
                }).then(res => {
                    this.banVisible = false;
                    if(res.data === 1){
                        this.getData();
                        this.$message.success('操作成功');
                    }else{
                        this.$message.error('操作失败');
                    }
                    
                })
            },
            confirmOn(){
                this.$axios('/api/Club/clubOnUser',{
                    params: {
                        userid: this.onid
                    }
                }).then(res => {
                    this.onVisible = false;
                    if(res.data === 1){
                        this.getData();
                        this.$message.success('操作成功');
                    }else{
                        this.$message.error('操作失败');
                    }
                })
            },
            selectUserState(){
                if(this.select_state == -1){
                    this.getData();
                }else{
                    this.getStateData(this.select_state);
                }
            },
            getStateData(state){
                // TODO: clubid应该换成session中存储的clubid
                this.$axios.get('/api/Club/clubStateUserList',{
                    params: {
                        state: state,
                        clubid: localStorage.clubid
                    }
                }).then(res => {
                    this.clubUserData = res.data;
                })
            }
        }
    }

</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
    .mr10{
        margin-right: 10px;
    }
</style>
